<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" initial-scale=1.0">
    <title>Document</title>
    <style>
        .bt{
            background-color: #F6F6F6;
             color: #000000;
        }
        .brightBt{
            background-color: #FD8D27;
            color: #ffffff;
        }
    </style>
    <!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
</head>
<body>
    <h1>待办事项</h1>
    <input type="text" id="inp"><button onclick="add()">添加</button>
    <ol id="todo"></ol>
    <script>
        let list = [];
        function add(){
            let event = inp.value;
            list.push(event);
            console.log(list);
            let content = '';
            for(let i = 0; i < list.length; i++){
                content += `<li>${list[i]}</li>`
                inp.value = ''
            }
            todo.innerHTML = content;
        }
    </script>
    <div id="div1">
        <button onclick="choice(this)" class="bt" id="bt1">1</button>
        <button onclick="choice(this)" class="bt" id="bt2">2</button>
        <button onclick="choice(this)" class="bt" id="bt3">3</button>
        <button onclick="choice(this)" class="bt" id="bt4">4</button>
        <button onclick="next()">》</button>
    </div>
    <script>
        function choice(target){
            let arr = document.getElementsByClassName('bt');
            let id = $(target)[0].getAttribute('id')
            for(let i = 0; i < arr.length; i++){
                arr[i].classList.remove("brightBt");
            }
            document.getElementById(id).classList.add("brightBt");
        }
        function next(){
            let arr = document.getElementsByClassName('bt');
            for(let i = 0; i < arr.length; i++){
                let xin = document.getElementById('bt'+i).getAttribute('value');
                document.getElementById('bt'+i).value = xin + 4;
                
            }
        }
    </script>
</body>
</html>